<template>
  <div>
    <yj-dialog
      :modal="dialog.modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
      @close="closeDialog"
    >
      <template slot="dialog-content">
        <el-form
          :model="form"
          :rules="rules"
          ref="userForm"
          size="mini"
          label-width="100px"
        >
          <el-form-item label="标题" :rule="rules" prop="title">
            <el-input
              v-model="form.title"
            ></el-input>
          </el-form-item>

          <el-form-item label="内容" :rule="rules" prop="content">
            <el-input
              v-model="form.content"
            ></el-input>
          </el-form-item>

          <el-form-item label="群通知" :rule="rules" prop="all">
            <el-switch
              v-model="!form.all"
              disabled
              active-text="用户通知"
              inactive-text="">
            </el-switch>
          </el-form-item>
        </el-form>

        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelDialogBtn('userForm')"
          >取 消
          </el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="saveDialogBtn('userForm')"
          >确 定
          </el-button
          >
        </div>
      </template>
    </yj-dialog>

    <!--    用户详情-->
    <yj-dialog
      :modal="dialogUser.modal"
      :width="dialogUser.width"
      :title="dialogUser.title"
      :dialogVisible="dialogUser.visible"
      @close="closeDialog"
    >
      <template slot="dialog-content">
        <div class="userInfo">
          <div class="user-avatar">
            <el-image
              :preview-src-list="[userInfo.avatar]"
              style="width: 100px; height: 100px"
              :src="userInfo.avatar"
              fit="fit"></el-image>
            <div>用户头像</div>
          </div>
          <div class="user-info">
            <div>
              <ul>
                <li>
                  <b>剩余积分：</b> <span style="color:#E6A23C;font-size: 22px">
                {{ userInfo.integral }}
              </span>
                </li>
                <li><b>官方用户：</b>
                  <el-tag v-if="userInfo.isAdmin" size="mini" type="warning">官方账户</el-tag>
                  <el-tag v-else size="mini" type="info">普通用户</el-tag>
                </li>
                <li>
                  <b>姓名：</b>{{ userInfo.realName }}/{{ userInfo.sex = 0 ? '女' : (userInfo.sex = 1 ? '男' : '未知') }}
                  {{ userInfo.userPhone }}
                </li>
                <li>
                  <b>邀请码：</b>{{ userInfo.inviteCode }}
                  <ol>
                    <el-image
                      :preview-src-list="[userInfo.inviteQrCode]"
                      style="width: 100px; height: 100px"
                      :src="userInfo.inviteQrCode"
                      fit="cover"></el-image>
                  </ol>
                </li>
              </ul>
            </div>
            <div>
              <ul>
                <li>
                  <b>学校信息：</b>
                  <ol>
                    <b>地址：</b>{{ userInfo.city }} {{ userInfo.schoolName }} {{ userInfo.dorm }}
                  </ol>
                  <ol>
                    <b>学号：</b>{{ userInfo.studentCode }}
                  </ol>
                  <ol>
                    <b>证件照学生证/或者身份证：</b>
                  </ol>
                  <ol>
                    <ol>
                      <el-image
                        :preview-src-list="[userInfo.idCard]"
                        style="width: 100px; height: 100px"
                        :src="userInfo.idCard"
                        fit="cover"></el-image>
                    </ol>
                  </ol>
                </li>
              </ul>
            </div>
            <div>
              <ul>
                <li>
                  <b>邀请人：</b>{{ userInfo.inviteesUserName }} {{ userInfo.invitees }}
                </li>
                <li>
                  <b>微信：</b>{{ userInfo.wechatId }} {{ userInfo.nickName }}
                </li>

                <li>
                  <b>支付宝账号：</b>{{ userInfo.alipayAccount }}
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelUserDialogBtn('userForm')"
          >关闭
          </el-button
          >
        </div>
      </template>
    </yj-dialog>

    <table-frame
      ref="frame"
      :removeKey="prop.removeKey"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :showDelBtn="prop.showDelBtn"
      :delBtnPermission="prop.delBtnPermission"
    >
      <template slot="top_operate" slot-scope="currentRow">
        <auth :code="permission.notice">
          <template slot="auth">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="add(currentRow)"
              size="mini"
            >发布通知
            </el-button
            >
          </template>
        </auth>
      </template>

      <template slot="columns">
        <el-table-column align="center" fixed="left" prop="avatar" label="头像">
          <template slot-scope="scope">
            <el-image fit="cover" style="width:50px;height: 50px" :preview-src-list="[scope.row.avatar]"
                      :src="scope.row.avatar"/>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="idCard" label="证件照">
          <template slot-scope="scope">
            <el-image fit="cover" style="width:50px;height: 50px" :preview-src-list="[scope.row.idCard]"
                      :src="scope.row.idCard"/>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="left" width="100px" show-overflow-tooltip prop="isAdmin"
                         label="官方用户">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isAdmin" size="mini" type="warning">官方账户</el-tag>
            <el-tag v-else size="mini" type="info">普通用户</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" fixed="left" show-overflow-tooltip prop="realName"
                         label="真实姓名"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="nickName" label="微信昵称"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="wechatId" label="微信ID"></el-table-column>
        <el-table-column align="center" fixed="left" show-overflow-tooltip prop="userPhone"
                         label="手机号"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="alipayAccount" label="支付宝账号"></el-table-column>
        <el-table-column align="center" sortable fixed="left" show-overflow-tooltip prop="integral" label="积分">
          <template slot-scope="scope">
            <div style="color:#E6A23C;font-size: 22px">
              {{ scope.row.integral }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" prop="userStatus" label="状态">
          <template slot-scope="scope">
            <el-switch
              @change="v=>changeUserStatus(v,scope.row.userCode)"
              style="display: block"
              v-model="scope.row.userStatus"
              active-color="#13ce66"
              inactive-color="#ebebeb"
              active-text="正常"
              :active-value="0"
              :inactive-value="1"
              inactive-text="">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sex" label="性别">
          <template slot-scope="scope">
            {{ scope.row.sex === 1 ? '男' : scope.row.sex === 0 ? '女' : '未知' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="inviteQrCode" label="我的邀请码">
          <template slot-scope="scope">
            <el-image fit="cover" style="width:50px;height: 50px" :preview-src-list="[scope.row.inviteQrCode]"
                      :src="scope.row.inviteQrCode"/>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="inviteesUserName" label="我的邀请人"></el-table-column>
        <el-table-column align="center" fixed="right" prop="city" label="城市"></el-table-column>
        <el-table-column align="center" fixed="right" show-overflow-tooltip prop="schoolName"
                         label="学校"></el-table-column>
        <el-table-column align="center" prop="studentCode" label="学号"></el-table-column>
        <el-table-column align="center" prop="dorm" label="校寝室"></el-table-column>
        <el-table-column
          prop="createTime"
          sortable
          width="150"
          align="center"
          sortable
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          sortable
          align="center"
          width="150"
          label="更新时间"
        ></el-table-column>
      </template>
      <template slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              class="operate-btn"
              icon="el-icon-view"
              type="text"
              @click="viewDetail(scope.row)"
              size="mini"
              slot="auth"
            > 详情
            </el-button>
          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>

let _this = {};
import searchModel from "./Search.vue";

export default {
  data() {
    return {
      userInfo: {},
      dialog: {
        width: "40%",
        title: "下发通知",
        visible: false,
        modal: true,
      }
      , dialogUser: {
        width: "50%",
        title: "个人资料",
        visible: false,
        modal: true,
      },
      prop: {
        searchShow: true,
        operateShow: true,
        location: " 用户管理 / App用户",
        getDataUrl: "/customer/pageList",
        removeUrl: "",
        searchModel: searchModel,
        removeKey: 'id',
        reloadTable: false,
        showDelBtn: false,
        isPage: true,
        delBtnPermission: ""
      },
      form: {
        id: "",
        title: "",
        content: "",
        userCode: "",
        all: false,
      },
      rules: {
        id: [{required: false}],
        title: [{required: true}],
        userCode: [{required: true}],
        content: [
          {required: true, message: "请输入用户名", trigger: "blur"}
        ],
      },

      permission: {
        changeUserStatus: "customer:changeUserStatus",
        notice: "message:add:one",
      },

      URL: {
        checkAuth: "/permission/auth/check",
        changeUserStatus: "/customer/changeUserStatus",
        save: "/message/save",
      },
    };
  },
  created() {
  },
  methods: {
    add(rows) {
      let users = rows.slotScope.rows;
      if (users.length <= 0) {
        this.$warning("请至少勾选一个用户")
        return;
      }
      let userCodes = [];
      users.forEach(u => {
        userCodes.push(u.userCode);
      })
      this.form.userCode = userCodes.join(",")
      this.dialog.visible = true;
    },
    // 取消
    cancelDialogBtn(userForm) {
      this.dialog.visible = false;
      this.setDataToForm(null);
      this.$refs[userForm].resetFields();
    },

    closeDialog() {
      this.$emit("closeModal", false);
    },

    viewDetail(row) {
      this.dialogUser.visible = true;
      this.userInfo = row;
    },
    // 取消
    cancelUserDialogBtn(userForm) {
      this.dialogUser.visible = false;
    },

    saveDialogBtn(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.save();
        } else {
          this.$warning("缺少必填数据");
          return false;
        }
      });
    },

    save() {
      this.$postJson(this.URL.save, this.form).then((res) => {
        this.$success("操作成功");
        this.dialog.visible = false;
        this.form.content = "";
        this.form.title = "";
        this.form.userCode = "";
        this.reloadTable();
      });
    },


    changeUserStatus(v, userCode) {
      let that = this;
      this.$get(this.URL.checkAuth, {code: this.permission.changeUserStatus}).then((res) => {
        if (res.R) {
          if (!res.data) {
            that.$warning("无操作权限")
            return;
          }
          that.$put(that.URL.changeUserStatus, {userCode: userCode, status: v}).then(res => {
            that.reqResult(res);
          })
        }
      });
    },

    reqResult(res) {
      if (res.R) {
        this.$success("操作成功");
        this.reloadTable();
      }
    },

    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.userInfo {
  display: flex;
  flex-direction: column;
  align-content: center;
}

.user-avatar {
  text-align: center;
}

.userInfo ul li, .userInfo ul li ol {
  margin: 10px 0;
}

.user-info {
  display: flex;
  flex-direction: row;
}
</style>
